<template>
  <dl>
    <dt class="fs40 pb20 fw-b">指令局部</dt>
    <dd class="pb20">
      <div class="w400 h400 mb20" v-load="vLoading"></div>
      <t-button type="primary" @click="vLoading=!vLoading">点击局部加载效果</t-button>
    </dd>
    <dd class="mt20">
      <pre v-highlight="vLoadingText"><code></code></pre>
    </dd>
  </dl>
  <dl class="pt40">
    <dt class="fs40 pb20 fw-b">函数全局加载</dt>
    <dd class="pb20">
      <t-button type="primary" @click="handleLoading">点击函数全局加载效果</t-button>
    </dd>
    <dd class="mt20">
      <pre v-highlight="loadingText"><code></code></pre>
    </dd>
  </dl>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { TLoading } from '@/base/directive/TLoading/TGlobalLoading'

const vLoading = ref<boolean>(true)

const vLoadingText = `<div class="w400 h400 mb20" v-load="vLoading"></div>
<t-button type="primary" @click="vLoading=!vLoading">点击局部加载效果</t-button>`
const loadingText = `<t-button type="primary" @click="handleLoading">点击局部加载效果</t-button>
const handleLoading = () => {
  const loading = TLoading()
  setTimeout(() => {
    loading.close()
  }, 1000)
}`

const handleLoading = () => {
  const loading = TLoading()
  setTimeout(() => {
    loading.close()
  }, 1000)
}
</script>

<style scoped lang="scss">

</style>
